﻿@page "/dropdown-multiple"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DropDown <strong>multiple</strong> selection
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Enable selecting multiple items from the dropdown list.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo the <strong>Products</strong> dropdown has <code>Multiple="true"</code> with two products pre-selected (IDs 1 and 2), using <code>TextProperty</code> and <code>ValueProperty</code> to display product names while binding to product IDs.
</RadzenText>

<RadzenExample ComponentName="DropDown" Example="DropDownMultiple">
    <DropDownMultiple />
</RadzenExample>

<RadzenText Anchor="dropdown-multiple#chips"  TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    DropDown <strong>multiple</strong> selection with chips
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Chips="true"</code> to display selected items as removable chips in the dropdown.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownMultipleChips">
    <DropDownMultipleChips />
</RadzenExample>

<RadzenText Anchor="dropdown-multiple#define-max-labels-and-selected-items-text" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define max labels and selected items text
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>MaxSelectedLabels</code> to limit displayed items and <code>SelectedItemsText</code> to show a custom message when many items are selected.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownMultipleMaxLabels">
    <DropDownMultipleMaxLabels />
</RadzenExample>

<RadzenText Anchor="dropdown-multiple#item-comparer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Specify an Equality Comparer for item selection. Useful when binding directly to an object collection.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>EqualityComparer</code> to define custom comparison logic for determining when items are equal.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="DropDownMultipleItemComparer">
    <DropDownMultipleItemComparer />
</RadzenExample>
